import React, { Component } from "react"
import fetchData from '../../util/fetch'
import { Button, Modal, Form, Input, message, DatePicker, Pagination, Row, Col } from 'antd'
import { connect } from 'react-redux'
import { mapStateToProps, mapDispatchToProps } from '../../util/store'
import { parse } from 'qs'
import moment from 'moment'
import  { Link } from 'react-router'

class ActivityDetail extends Component {
    constructor(props) {
        super(props)
        this.state = {
            banner: null,
            newsData: null,//新闻动态
            detailList: {
                total: 1,
                page: 1,
                size: 1,
                data: [
                    { title: '0', createTime: '1', id: '99' },
                ]
            }
        }
    }

    componentDidMount() {
        ////banner类型 1首页、2hibaby服务、3美研中心、4活动咨询、5新妈分享、6关于Hibaby
        this.getBannerData('/crm/api/v1/web/banner/findOneByType', { "dataId": 4 });
        // 4-1	新闻动态
        this.getNewsData('/crm/api/v1/web/news/findOneByType', { "str": "4-1" });
        // 4-1-1	新闻动态列表
        this.getData('/crm/api/v1/web/news/findPageListByType', { "type": "4-1-1" });
    }

    getData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            console.log("新闻列表", data);
            this.setState({
                detailList: res
            });
        }.bind(this))
    }

    getNewsData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data)
            console.log("新闻标题", data);
            this.setState({
                newsData: data
            });
        }.bind(this))
    }

    getBannerData(url, opts) {
        fetchData(url, opts, function (res) {
            let data = eval(res.data);
            this.setState({
                banner: data
            });
        }.bind(this));
    }

    onChange = (page) => {
        this.getData('/crm/api/v1/web/news/findPageListByType', {
            "page": page,
            "size": '10',
            "type": "4-1-1"
        });
    }

    //首页 > 活动资讯 > 新闻动态 > 列表</div>

    render() {

        const { detailList } = this.state;
        const { total, data } = detailList;

        return (
            <div className="activityList">
                <div className="activity-banner"><img src={this.state.banner ? this.state.banner.imgUrl : null}/></div>
                <div className="news-content">
                    <Row>
                        <Col span="12">
                            <div className="title">新闻动态 News</div>
                        </Col>
                        <Col span="12">
                            <p className="curlocation">
                                当前位置:
                                <Link className="location-link" to="/"> 首页 > </Link>
                                <Link className="location-link" to="/activity/1">活动资讯 > </Link>
                                <Link className="location-link" to="/activity/1">新闻动态 ></Link>
                                列表
                            </p>
                        </Col>
                    </Row>
                    <div className="spanLine"></div>
                </div>
                <div className="News">
                    <ul className="NewsList">
                        {
                            data.map((v, k) => {
                                const time = moment(v.createTime)
                                return (
                                    <Link className="newsLink" key={k} to={`/detail?id=${v.id}`}>
                                        <li>
                                            <p className="NewsTitle"><span className="point"></span>{v.title}</p>
                                            <p className="NewsDate">{time.format('YYYY-MM-DD')}</p>
                                        </li>
                                    </Link>
                                )
                            })
                        }
                        <Pagination size="small" onChange={this.onChange} total={total}/>
                    </ul>
                </div>
            </div>
        );
    }
}

export default ActivityDetail;